<template>
  <view class="table-list">
    <view class="list-box">
      <view class="title">球桌预约列表</view>
      <view class="list-item" v-for="item in table_Data" :key="item.id">
        <image :src="item.imageUrl"></image>
        <view class="item-info">
          <text>{{ item.name }}</text>
          <text>¥{{ item.price }} 元/小时</text>
          <view @click="goToReservation(item.id)">预定</view>
        </view>
      </view>
      <!-- 加载提示 -->
      <view class="loading-tip" v-if="loading">
        {{ loadingText }}
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onReachBottom } from '@dcloudio/uni-app';
import { getProductList } from '@/services/product.js';

// 数据列表
const table_Data = ref([]);
// 加载状态
const loading = ref(false);
// 加载提示文本
const loadingText = ref('加载中....');
// 当前页码（默认第一页）
const currentPage = ref(1);
// 每页条数（默认10条）
const pageSize = 10;
// 是否还有更多数据
const hasMore = ref(true);

const loadData = async (page = 1) => {
  // 防止重复请求或无更多数据时继续请求
  if (!hasMore.value || loading.value) return;
  loading.value = true;
  try {
    const response = await getProductList({
      pageNum: page,
      pageSize: pageSize
    });
    if (response.code === 200) {
      const { list, total } = response.data;
      // 追加新数据
      table_Data.value = [...table_Data.value, ...list];
      currentPage.value = page;
      if (table_Data.value.length >= total || list.length < pageSize) {
        hasMore.value = false;
        loadingText.value = '没有更多数据了';
      } else {
        loadingText.value = '加载中...';
      }
    } else {
      loadingText.value = '加载失败，请重试';
      console.error('数据请求失败：', response.message || '未知错误');
    }
  } catch (error) {
    loadingText.value = '网络错误，请检查网络';
    console.error('请求异常：', error);
  } finally {
    loading.value = false;
  }
};

// 监听页面触底事件，触发加载更多
onReachBottom(() => {
  if (!hasMore.value || loading.value) return;
  loadData(currentPage.value + 1);
});

// 跳转到预约页面
const goToReservation = (tableId) => {
  uni.navigateTo({
    url: `/pages/list/appointmentDetails?tableId=${tableId}`
  });
};

// 页面初始加载
loadData();
</script>

<style lang="scss">
.table-list {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(110.13deg, rgba(172, 206, 242, 1) 0%, rgba(255, 255, 255, 1) 100%);

  .title {
    font-size: 20px;
    text-align: center;
    margin: 20px 0;
    font-weight: 700;
    color: rgba(81, 89, 245, 1);
  }

  .list-box {
    padding: 15px;

    .list-item {
      background-color: #fff;
      border-radius: 10px;
      display: flex;
      flex-direction: row;
      padding: 15px;
      margin-bottom: 15px;

      image {
        width: 100px;
        height: 100px;
        border-radius: 8px;
        margin-right: 15px;
      }

      .item-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        text:nth-child(1) {
          font-size: 18px;
          font-weight: bold;
        }

        text:nth-child(2) {
          color: #ff6600;
          font-size: 16px;
        }

        text:nth-child(3) {
          font-size: 12px;
        }

        view {
          align-self: flex-end;
          background-color: #3b82f6;
          color: white;
          padding: 5px 15px;
          border-radius: 20px;
          cursor: pointer;
        }
      }
    }

    .loading-tip {
      text-align: center;
      padding: 15px;
      color: #999;
    }
  }
}
</style>